<template>
       <h2 style="text-align: center;">投资管理</h2>
       <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资项目总金额</th>
                <th>用户已投资金额</th>
                <th>剩余投资金额</th>
                <th>操作</th>
            </tr>
        </thead>
         <tbody>
              <tr v-for="item in info">
                  <td>{{item.I_Id}}</td>
                  <td>{{item.I_Name}}</td>
                  <td>{{item.I_Budget}}</td>
                  <td>{{item.UI_Money}}</td>
                  <td>{{item.I_Residue}}</td>
                  <td><a href="#" @click="InvestRedeem(item.UI_Id)">赎回</a></td>
              </tr>
         </tbody>
       </table>
</template>

<script setup lang="ts">
import { ref,onMounted} from 'vue';

import axios from 'axios';

import { useRouter } from 'vue-router';

const router = useRouter();

import {useUserStore} from '../../Store/Index.ts'

const userStore = useUserStore();

//创建响应式数据
const info = ref([{
    I_Id:0,
    I_Name:"",
    I_Budget:0,
    I_Residue:0,
    UI_Money:0,
    UI_Id:0
}])

onMounted(()=>{
    LoadData();
})

const LoadData = ()=>{
    axios({
        url:"https://localhost:44337/api/Invests/ShowUserInvestRedeemInfo",
        method:"get",
        params:{
            Uid:userStore.Uid
        }
    }).then(res=>{
        console.log(res.data);
        info.value = res.data;
       
    }).catch
    (err=>{
        console.log(err);
    })
}


//通过路由将用户投资编号传递到用户投资赎回页
const InvestRedeem = (UIid:number)=>{
    router.push({
        name:"AddUserInvestRedeem",
        params:{
            UIid:UIid
        }
    })
}
</script>